$screen-mobile:768px;
$screen-pad:992px;
$screen-pc:1200px;
$screen-large:1200px;
.row{
    display: flex;
    flex-wrap: wrap;
    // 竖向排列
    &.directionColumn{
        flex-direction: column;
    }
    &.isWrap{
        flex-wrap: wrap;
    }
    &.notWrap{
        flex-wrap: nowrap;
    }
}
.col{
    // 固定
    &.fixed{
        flex-grow: 0;
        flex-shrink: 0;
    }
    // 放大
    &.grow{
        flex-grow: 1;
        flex-shrink: 0;
    }
    // 缩小
    &.shrink{
        flex-grow: 0;
        flex-shrink: 1;
    }
    // 自动缩放
    &.auto{
        flex-grow: 1;
        flex-shrink: 1;
    }
}
@media screen{
    @media (min-width:$screen-large){
        .col-large-1-1{
            flex-basis: 100%;
        }
        @for $i from 2 through 12{
            @for $j from 1 to $i{
                .col-large-#{$j}-#{$i}{
                    flex-basis: $j / $i * 100%;
                }
            }
        }
    }
}
@media screen{
    @media (max-width:$screen-pc){
        .col-pc-1-1{
            flex-basis: 100%;
        }
        @for $i from 2 through 12{
            @for $j from 1 to $i{
                .col-pc-#{$j}-#{$i}{
                    flex-basis: $j / $i * 100%;
                }
            }
        }
    }
}
@media screen{
    @media (max-width:$screen-pad){
        .col-pad-1-1{
            flex-basis: 100%;
        }
        @for $i from 2 through 12{
            @for $j from 1 to $i{
                .col-pad-#{$j}-#{$i}{
                    flex-basis: $j / $i * 100%;
                }
            }
        }
    }
}
@media screen{
    @media (max-width:$screen-mobile){
        .col-mobile-1-1{
            flex-basis: 100%;
        }
        @for $i from 2 through 12{
            @for $j from 1 to $i{
                .col-mobile-#{$j}-#{$i}{
                    flex-basis: $j / $i * 100%;
                }
            }
        }
    }
}